馃帹 M贸dulo 9: Exportaci贸n y entrega de archivos en Figma
Objetivo del m贸dulo:
Aprender谩s a preparar y exportar tus dise帽os para desarrollo web, incluyendo formatos, resoluci贸n y organizaci贸n de activos.
✅ 1. Formatos de exportaci贸n comunes
Figma permite exportar en formatos como PNG, JPG, SVG y PDF.
- PNG/JPG: Im谩genes rasterizadas para web.
- SVG: Gr谩ficos vectoriales escalables, ideales para logos e 铆conos.
- PDF: Para presentaciones o documentos.
馃搷 Ejemplo: Exportar un 铆cono en SVG para usar en una p谩gina web.
✅ 2. Exportar activos y slices
Puedes marcar elementos para exportar en el panel derecho.
Usa slices para definir 谩reas espec铆ficas si no quieres exportar todo el frame.
Configura resoluciones (1x, 2x, 3x) para soportar pantallas retina.
馃搷 Ejemplo: Exportar un bot贸n con fondo transparente en PNG 2x.
✅ 3. Organizaci贸n para entrega a desarrolladores
- Usa nombres claros para capas y componentes.
- Organiza frames y p谩ginas por secciones o pantallas.
- Proporciona acceso a prototipos y gu铆as de estilos.
馃搷 Ejemplo: Crear una p谩gina llamada “Assets” con todos los elementos listos para exportar.
✅ 4. Mini ejercicio pr谩ctico
馃幆 Objetivo: Exportar elementos listos para desarrollo web.
- Marca para exportar un logo en SVG.
- Exporta un bot贸n en PNG con fondo transparente en 2x.
- Crea una p谩gina llamada “Assets” y organiza los elementos exportables.
馃搷 Resultado esperado: Archivos exportados y organizados para entrega clara a desarrolladores.
馃摜 Tips r谩pidos del m贸dulo
- Exporta SVG para gr谩ficos que necesitan escalabilidad.
- Usa PNG con fondo transparente para botones y iconos.
- Organiza siempre tus archivos para facilitar el trabajo en equipo.
馃搶 Preguntas de repaso
Pregunta 1: ¿Qu茅 formato es ideal para logos escalables?
- A) PNG
- B) JPG
- C) SVG
- D) PDF
Pregunta 2: ¿Para qu茅 se usan los slices en Figma?
- A) Para dibujar formas.
- B) Para definir 谩reas espec铆ficas para exportar.
- C) Para crear componentes.
- D) Para agregar texto.
No hay comentarios:
Publicar un comentario